<!--
 * @Author: ray ray.chin@163.com
 * @Date: 2024-06-10 15:09:22
 * @LastEditors: ray ray.chin@163.com
 * @LastEditTime: 2024-06-12 14:34:53
 * @FilePath: /app-template-uni-upgrade/src/components/ray-form/ray-input.vue
 * @Description: 输入框组件
 * Copyright (c) 2024 by ray, All Rights Reserved.
-->
<template>
    <view class="form-container">
        <!-- <form @submit="formSubmit" @reset="formReset"> -->
        <view class="form-main">
            <view v-if="formObject.label"
                class="form-asterisk-wrap"
            >
                {{ formObject.mustInput ? '*' : '' }}
            </view>
            <view v-if="formObject.label"
                class="form-title-wrap"
            >
                {{ formObject.label }}:
            </view>
            
            <!-- https://uniapp.dcloud.net.cn/component/uniui/uni-easyinput.html -->
            <uni-easyinput
                ref="myComponent"
                :name="formObject.name"
                v-model="formObject.value"
                :placeholder="formObject.placeholder"
                :maxlength="formObject.maxlength"
                :type="formObject.type"
                :readonly="formObject.readonly"
                :disabled="formObject.disabled"
                :error="formObject.error"
                :rules="formObject.rules"
                @input="inputChange"
                trim="both"
            >
			</uni-easyinput>
        </view>
        <!-- </form> -->
    </view>
</template>
<script>
import uniEasyinput from '@/components/uni-easyinput/uni-easyinput.vue'
export default {
    name: 'ray-input',
    behaviors: ['uni://form-field'],
    components: {
        uniEasyinput,
    },
    props: {
        formObject: {
            type: Object,
            default: () => (
                {
                    label: '表单',
                    mustInput: true,
                    value: '',
                    name: 'name',
                    placeholder: '请输入',
                    maxlength: 100,
                    type: 'text',
                    readonly: false,
                    disabled: false,
                    error: '',
                    rules: [{
                            required: true,
                            errorMessage: '请输入姓名',
                        },
                        {
                            minLength: 3,
                            maxLength: 5,
                            errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
                        },
                    ]
                }
            )
        },
    },
    model: {
        // 指定 v-model 要绑定的参数叫什么名字，来自于 props 中定义的参数
		prop: 'formObject',
        // 指定要触发的事件名字，将被用于 $emit
		event: 'change',
	},
	computed: {
		getValue: {
			// 这里的计算属性使用了 getter、setter，可以简化代码
			// 可参见链接 https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E7%9A%84-setter
			get() {
				return this.formObject
			},
			set(val) {
                // 触发
				this.$emit('change', val)
			},
		},
	},
    data() {
        return {
        }
    },
    created() {
    },
    mounted() {
    },
    methods: {
        inputChange(val) {
            console.warn('inputChange', val);
        },
    },
}
</script>
<style lang="scss" scoped>
.form-container {
    background-color: #ffffff;
    align-items: center;
    font-size: 28rpx;
    color: #666666;
    padding: 20rpx 10rpx;
    border-bottom: 1rpx solid #f5f5f5;
    width: 100%;
}

.form-main {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    color: #666666;
}

.form-asterisk-wrap {
    color: #ff0000;
    padding: 0 5rpx;
    width: 30rpx;
}

.form-title-wrap {
    color: #666666;
}

/deep/ .is-input-border {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    box-sizing: border-box;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    border: 0px solid #dcdfe6;
    border-radius: 0px;
}

/deep/ .uni-easyinput__placeholder-class {
    color: #999;
    font-size: 28rpx;
}
</style>